<div class="micromodal" id="user-profile-modal" data-user-id="{{user_id}}" aria-hidden="true">
    <div class="modal__overlay" tabindex="-1" data-micromodal-close>
        <div class="modal__container new-style{{#unless profile_data.length}} no-fields{{/unless}}" role="dialog" aria-modal="true" aria-labelledby="dialog_title">
            <main class="modal__body" id="body" data-simplebar data-simplebar-auto-hide="false">
                <button class="modal__close" aria-label="{{t 'Close modal' }}" data-micromodal-close></button>
                <div id="name">
                    {{full_name}}
                    {{#if is_me}}
                    <a href="/#settings/profile">
                        <i class="fa fa-edit" id="edit-button" aria-hidden="true"></i>
                    </a>
                    {{/if}}
                </div>
                <div id="tab-toggle" class="center"></div>
                <div class="tab-data">
                    <div class="tabcontent active" id="profile-tab">
                        <div id="avatar" {{#if user_is_guest}} class="guest-avatar" {{/if}}
                          style="background-image: url('{{user_avatar}}');">
                        </div>
                        <div id="default-section">
                            {{#if show_email}}
                            <div id="email" class="default-field">
                                <span class="name">{{#tr}}Email{{/tr}}</span>
                                <span class="value">{{email}}</span>
                            </div>
                            {{/if}}
                            <div id="date-joined" class="default-field">
                                <span class="name">{{#tr}}Joined{{/tr}}</span>
                                <span class="value">{{date_joined}}</span>
                            </div>
                            <div id="user-type" class="default-field">
                                <span class="name">{{#tr}}Role{{/tr}}</span>
                                <span class="value">{{user_type}}</span>
                            </div>
                            <span class="value">{{last_seen}}</span>
                            {{#if user_time}}
                            <div class="default-field">
                                <span class="name">{{#tr}}Local time{{/tr}}</span>
                                <span class="value">{{user_time}}</span>
                            </div>
                            {{/if}}
                        </div>
                        <div id="content">
                            {{#each profile_data}}
                                <div data-type="{{this.type}}" class="field-section custom_user_field" data-field-id="{{this.id}}">
                                    <div class="name">{{this.name}}</div>
                                    {{#if this.is_user_field}}
                                        <div class="pill-container not-editable" data-field-id="{{this.id}}">
                                            <div class="input" contenteditable="false" style="display: none;"></div>
                                        </div>
                                    {{else if this.is_link}}
                                        <a href="{{this.value}}" target="_blank" rel="noopener noreferrer" class="value">{{this.value}}</a>
                                    {{else if this.is_external_account}}
                                        <a href="{{this.link}}" target="_blank" rel="noopener noreferrer" class="value">{{this.value}}</a>
                                    {{else}}
                                        {{#if this.rendered_value}}
                                        <div class="value rendered_markdown">{{rendered_markdown this.rendered_value}}</div>
                                        {{else}}
                                        <div class="value">{{this.value}}</div>
                                        {{/if}}
                                    {{/if}}
                                </div>
                            {{/each}}
                        </div>
                    </div>

                    <div class="tabcontent" id="user-profile-streams-tab">
                        <div class="stream-list-top-section">
                            <div class="header-section">
                                <h3 class="stream-list-header">{{t 'Subscribed streams' }}</h3>
                            </div>
                            <input type="text" class="stream-search" placeholder="{{t 'Filter streams' }}" />
                            <button type="button" class="clear_search_button" id="clear_stream_search">
                                <i class="fa fa-remove" aria-hidden="true"></i>
                            </button>
                        </div>
                        <div class="alert stream_list_info"></div>
                        <div class="subscription-stream-list">
                            <table class="user-stream-list" data-empty="{{t 'No stream subscriptions.'}}"></table>
                        </div>
                    </div>

                    <div class="tabcontent" id="user-profile-groups-tab">
                        <div class="subscription-group-list">
                            <table class="user-group-list" data-empty="{{t 'No user group subscriptions.'}}"></table>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
</div>
